<template>
  <a-modal v-model:visible="visible" :footer="false" title="关键词回复预览" :modal-style="{ minWidth: '400px' }">
    <div class="flex box flex-j-c flex-a-c w-full overflow-x-auto">
      <div class="div-mc">
        <div class="guise-mobile">
          <div class="guise-mobile-show flex-col">
            <div class="flex flex-a-c flex-j-c pt-10 pb-6 px-10">
              <div class="w-26 h-26 flex-center text-size-14 bge33c64 round-50-percent textfff">买</div>
              <div class="text-size-16 font-bold ml-6 text-overflow-1 w-fit max-w-26">买手妈妈官方群</div>
            </div>
            <div class="w-full flex-1 bge5e5e5 pt-20 box-border overflow-y-auto">
              <span v-for="item in keywords" :key="item.keywordId">
                <div class="w-full pr-6 pl-16 box-border mb-20">
                  <div class="flex flex-j-e">
                    <div class="mr-8 flex-1">
                      <div class="w-full flex-center p-8 box-border round-10 space-pre-line bg75e5a2">
                        {{ item.keyword }}
                      </div>
                    </div>
                    <div class="flex-col flex-a-c">
                      <a-avatar :size="30">
                        <IconUser />
                      </a-avatar>
                    </div>
                  </div>
                </div>
                <div class="w-full pl-6 pr-16 box-border mb-20">
                  <div class="flex flex-j-e">
                    <a-avatar :size="30">买</a-avatar>
                    <div class="ml-8 flex-1">
                      <div class="w-full bgfff flex-center p-8 box-border round-10 space-pre-line">
                        {{ item.reply }}
                      </div>
                    </div>
                  </div>
                </div>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
const visible = ref(false)
const keywords = ref([])

const openModal = (keywordsO) => {
  keywords.value = keywordsO
  visible.value = true
}

defineExpose({ openModal })
</script>

<style lang="scss" scoped>
@import './base.scss';
.bg-theme {
  background: rgb(var(--primary-6));
}
.border-theme {
  box-sizing: border-box;
  border: 1px solid rgb(var(--primary-6));
  border-top: none;
}
.border-r-theme {
  box-sizing: border-box;
  border-right: 1px solid rgb(var(--primary-6));
}
.max-w-26 {
  max-width: calc(100% - 48px);
}
.space-pre-line {
  white-space: pre-line;
  word-break: break-all;
}
.bg75e5a2 {
  background: #75e5a2;
}
.bg-transparent {
  background: transparent;
}
.guise-mobile {
  :deep(.arco-btn-outline) {
    zoom: 0.6;
  }
}
.text50 {
  color: #505050;
}
</style>
